﻿@inherits BootstrapComponentBase
@page "/table/virtualization"
@inject IStringLocalizer<TablesVirtualization> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<h3>@Localizer["TablesVirtualizationTitle"]</h3>
<h4>@Localizer["TablesVirtualizationDescription"]</h4>

<DemoBlock Title="@Localizer["VirtualizationNormalTitle"]"
           Introduction="@Localizer["VirtualizationNormalIntro"]"
           Name="Normal">
    <section ignore class="mb-3">
        @((MarkupString)Localizer["VirtualizationNormalDescription"].Value)
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel DisplayText="@Localizer["TablesFooterFixedLabel"]"></BootstrapInputGroupLabel>
            <Segmented Items="_fixedFooterSegments" @bind-Value="_isFixedFooter"></Segmented>
        </BootstrapInputGroup>
    </section>
    <div class="table-virtualize-demo">
        <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="Items" ScrollMode="ScrollMode.Virtual" ShowFooter="true" IsFixedFooter="_isFixedFooter">
            <TableColumns>
                <TableColumn @bind-Field="@context.DateTime" Width="180" />
                <TableColumn @bind-Field="@context.Name" />
                <TableColumn @bind-Field="@context.Address" Readonly="true" />
                <TableColumn @bind-Field="@context.Education" />
                <TableColumn @bind-Field="@context.Count" Editable="false" />
                <TableColumn @bind-Field="@context.Complete" />
            </TableColumns>
            <TableFooter>
                <TableFooterCell colspan="4" Text="@Localizer["TablesFooterInfo"]" Align="Alignment.Left" />
                <TableFooterCell colspan="2" Aggregate="AggregateType.Average" Field="@nameof(Foo.Count)" />
            </TableFooter>
        </Table>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["VirtualizationDynamicTitle"]"
           Introduction="@Localizer["VirtualizationDynamicIntro"]"
           Name="Dynamic">
    <section ignore class="mb-3">@Localizer["VirtualizationDynamicDescription"]</section>
    <div class="table-virtualize-demo">
        <Table TItem="Foo" IsBordered="true" IsStriped="true" ScrollMode="ScrollMode.Virtual" OnQueryAsync="OnQueryAsync">
            <TableColumns>
                <TableColumn @bind-Field="@context.DateTime" Width="180" />
                <TableColumn @bind-Field="@context.Name" />
                <TableColumn @bind-Field="@context.Address" Readonly="true" />
                <TableColumn @bind-Field="@context.Education" />
                <TableColumn @bind-Field="@context.Count" Editable="false" />
                <TableColumn @bind-Field="@context.Complete" />
            </TableColumns>
        </Table>
    </div>
</DemoBlock>
